<template>
  <div class="patient-reported-right-form-signature">
    <p>
      电子签名声明：我确认我已经审核了所有受试者的病例报告表。
      所有数据都是完整、真实和准确的。
      我在此签署的电子签名，在法律上等同于我的手写签名。
    </p>
    <div class="form">
      <div>
        <span>*</span><span>账号：</span
        ><el-input :disabled="userName?true:false" v-model="userName" :size="size" />
      </div>
      <div>
        <span>*</span><span>密码：</span
        ><el-input v-model="password" :size="size" />
      </div>
    </div>
    <div class="btn">
      <el-button :size="size" @click="$emit('close')">取消</el-button>
      <el-button
        type="primary"
        :size="size"
        :disabled="!userName || !password"
        @click="$emit('submit', { userName, password })"
        >确定</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  props: {
    size: {
      type: String,
      default: "mini"
    }
  },
  data() {
    return {
      userName: "",
      password: ""
    };
  },
  created () {
    const userInfo = JSON.parse(localStorage.getItem('user-info'))
    this.userName = userInfo.mobile
  }
};
</script>

<style lang="scss" scoped>
.el-button--primary.is-disabled,
.el-button--primary.is-disabled:active,
.el-button--primary.is-disabled:focus,
.el-button--primary.is-disabled:hover {
  color: #fff;
  background-color: #85a2d9;
  border-color: #85a2d9;
}
.el-button--primary {
  color: #fff;
  background-color: #6b1685;
  border: 1px solid #dcdfe6;
  border-color: #6b1685;
}
.patient-reported-right-form-signature {
  font-size: 0.7rem !important;
  > p {
    margin: 0 0.5rem;
  }
  .form {
    > div {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin: 0.8rem 0;
      > span:first-child {
        color: #f56c6c;
        margin-right: 0.2rem;
      }
      .el-input {
        width: 12rem;
      }
    }
  }
  .btn {
    text-align: right;
    .el-button {
      width: 2.5rem;
      padding: 0.3rem;
    }
  }
}
</style>